<template>
  <div>
    <!-- Cascader 级联选择器 -->
    <div class="block">
      <!-- <span class="demonstration">默认 click 触发子菜单</span> -->
      <el-cascader
        v-model="value"
        :options="options"
        clearable
        @change="handleChange"
        placeholder="请选择科室"
      ></el-cascader>
      <el-input v-model="input" placeholder="请输入医生姓名"></el-input>
      <el-button type="primary">搜索</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      value: [],
      options: [
        {
          value: "neike",
          label: "内科",
          children: [
            {
              value: "xiaohuaneike",
              label: "消化内科",
            },
            {
              value: "xueyeneike",
              label: "血液内科",
            },
            {
              value: "fengshimianyineike",
              label: "风湿免疫内科",
            },
            {
              value: "shenneike",
              label: "肾内科",
            },
          ],
        },
        {
          value: "waike",
          label: "外科",
          children: [
            {
              value: "xiaohuaneike",
              label: "XXX外科",
            },
            {
              value: "xueyeneike",
              label: "YYY外科",
            },
            {
              value: "fengshimianyineike",
              label: "ZZZ外科",
            },
            {
              value: "shenneike",
              label: "OOOO外科",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss" scoped>
  @import "./scss/index.scss";
</style>